
<html>
  <head>
  	<style type="text/css">
	  	.test1{
			font-size:16px;
			color:#ff0b0a;
	  		background-color: #88aa55;
			font-weight:bold;
			font-family:Arial, Helvetica, sans-serif;
	  	}
	  	.test2{
			font-size:16px;
			color:#a33b3b;
	  		background-color: #ffffff;
			font-weight:bold;
			font-family:Arial, Helvetica, sans-serif;
	  	}
	  	.test3{
	  		background-color: #FFFFCC;
	  	}
	  	.test4{
	  		background-color: #abcdef;
	  	}
	  	body{	  		
	  		background-color: #789087;
	  	}
	  	.mouseover{
	  		background-color: #333333;
	  	}
	  	.mouseout{
	  		background-color: '';
	  	}
  	</style>	
  	
  	<link type="text/css" href="../css/menu.css" rel="stylesheet" />
	
	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(
			function(){
				$.fn.myPlugin_insertTr = function(index){
					$('#tab1 tr').each(
						function(i,obj){
							//alert(i +'==========' + $(this).text());
							$('<tr><td>'+i+'</td><td>love</td></tr>').insertAfter($(this));
						}
					);
					for(var i=0;i<12;i++){
						$('#tab1').append('<tr><td>'+i+'</td><td>'+Math.random(1000)+'</td></tr>');
					}
				}
				$.fn.myMenu = function(){
					var m;
					$('li',$(this)).each(
						function(i){
							$(this).mouseover(
								function(d){
									clearInterval(m.tm);
									var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
									m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
								}
							);
							$(this).mouseout(
								function(el,ew){
								}
							);
						}
					);
				}
				$('ul.menu').myMenu();
				var currentobj;
				$('#tab1 tr').myPlugin_insertTr(2);
				$("#tab1 tr:even").addClass('test1');
				$("#tab1 tr:odd").addClass('test2');
				$("#tab1 tr:last").addClass('test3');
				$('#tab1 tr:first').addClass('test3');
				$('#tab1').append('<tr><td>uuuuu</td><td>aaaa</td></tr>');
				$('#tab2').addClass('test4');
			//	$('#tab2').slideUp(3000);
				$('#tab2'). hide(2000,function(){
					$('#tab2'). show(1000,function(){				
							$('#tab2').fadeTo('slow',0.25,function(){
								var h = $('table:first tr:first td:first')
									.append(' Lili . ')
									.prepend('Hi , ')
									;
							});
						}
					);
				});
				$('body').bind('mousemove',function(e){
					$('#log').text(currentobj.html());
					if(currentobj){
						$(currentobj).prependTo('#showcurrent');
					}
				});
				$('#tab1 tr').click(function(){
					//	alert($(this).html());
					}
				);
				$('#tab1 tr').mouseover(function(){
						$(this).css('backgroundColor','#993344').css('color','white');
					}
				);
				$('#tab1 tr').mouseout(function(){
						$(this).css('backgroundColor','').css('color','');
					}
				);
				$('#tab1 tr').mousedown(function(){
						currentobj = $(this).clone();
					}
				);
				$('#tab1 tr').mouseup(function(){
						
					}
				);
				$('body input').addClass('input');
//				$('#tab1 tr:first').insertAfter('<tr><td>insert</td></tr>');
//				$('#tab1 tr:first td:first').load('http://192.168.0.111:8080/Ibox_two');
			}
		);
	</script>
  </head>
  
  <body>
  	<ul class="mymenu">
  		<li><a href="#">aaaaaaa</a></li>
  		<li><a href="#">aaaaaaa</a></li>
  		<li><a href="#">aaaaaaa</a></li>
  		<li><a href="#">aaaaaaa</a></li>
  		<li><a href="#">aaaaaaa</a></li>
  		<li><a href="#">aaaaaaa</a></li>
  		<li><a href="#">aaaaaaa</a></li>
  	</ul>
  	<table id="tab1"  onselectstart='return false;' >
  		<tr id="tab1tr1" >
  			<td>how old are you ?</td>
  			<td>how are you</td>
  		</tr>
  		<tr id="tab1tr2" >
  			<td>what a beautiful girl !</td>
  			<td>i hate you</td>
  		</tr>
  	</table>
  	<table id="tab2" >
  		<tr >
  			<td>aaaaaaaaaaaa</td>
  			<td>aaaaaaaaaaaa</td>
  		</tr>
  		<tr >
  			<td>bbbbbbbbbbbb</td>
  			<td>bbbbbbbbbbb</td>
  		</tr>
  	</table>
  	<div id="log"></div>
  	<div id="showcurrent" style="position: absolute;">
  		<table>
  			<tr>
  				<td>
  				</td>
  			</tr>
  		</table>
  	</div>
  </body>
</html>
